import React,{useState,useEffect, useCallback,Component, PureComponent} from 'react';

function UseCallBackPage(props) {
    const [count,setCount] = useState(0);

    //当前的计算只和count有关
    const addClick = useCallback(()=>{
        console.log("compute")
        let sum = 0;
        for (let i = 0; i < count; i++) {
            sum += i;
        }
        return sum;
        //只有count改变的时候，当前函数才会重新执行
    },[count])
    const [value,setValue] = useState("");

    return (
        <div>
            <h3>UseCallBackPage</h3>
            <p>count:{count}</p>
            <button onClick={()=>setCount(count+1)}>add</button>
            <input value={value} onChange={event => setValue(event.target.value)}></input>
            <Child addClick={addClick}></Child>
        </div>
    );
}


class Child extends PureComponent {
    render() {
        console.log("child render")
        const {addClick} = this.props
        return (
            <div>
                <h3>Child</h3>
                <button onClick={()=>console.log(addClick())}>add</button>
            </div>
        );
    }
}

export default UseCallBackPage;
